<!--供应商人员详情-->
<template>
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    class="dialogStyleMiddle"
    :before-close="cancel"
  >
    <el-form
      v-if="dialogVisible"
      ref="addForm"
      class="dialog-form"
      :model="formData"
      label-width="auto"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="登录账号" prop="loginName">
            <span class="detail-info">{{ formData.loginName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="userName">
            <label slot="label" v-html="`用户名称`" />
            <span class="detail-info">{{ formData.userName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人员类型" prop="sysUserType">
            <el-select v-model="formData.sysUserType" style="width:100%" readonly placeholder="" clearable size="medium">
              <el-option
                v-for="dict in typeOptions"
                :key="dict.typeNum"
                :label="dict.typeName"
                :value="dict.typeNum"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="phonenumber">
            <label slot="label" v-html="`手&ensp;机&ensp;号`" />
            <span class="detail-info">{{ formData.phonenumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="contacts">
            <span class="detail-info">{{ formData.idCard }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户邮箱" prop="email">
            <span class="detail-info">{{ formData.email }}</span>
          </el-form-item>
        </el-col>
        <!-- 证件信息回显 -->
        <el-row :span="24" class="certificate-wrap">
          <!-- 111 -->
        </el-row>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
// 证书图片
import zhengshu from '@/assets/image/zhengshu.jpg'
export default {
  loginName: 'detailDialog',
  props: {
    typeOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showPic: true, // 展示图片
      zhengshu, // 证书图片
      zhengshuList: [zhengshu], // 证书查看列表
      /* 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      formData: { // 新增数据
        loginName: '', // 登录名称
        userName: '', // 用户名称
        sysUserType: '', // 人员类型
        idCard: '', // 身份证
        phonenumber: '', // 手机号
        appFiles: ''
      }
      /* 新增 end*/
    }
  },
  methods: {
    /* 详情弹层 start*/
    // 从父组件获取参数的方法
    handleAdd(title, id) {
      this.dialogVisible = true
      this.dialogTitle = title
      this.getDetailById(id)
    },
    // 获取详情
    getDetailById(id) {
      this.formData = { ...id }
    },
    // 关闭
    cancel() {
      this.dialogVisible = false
    },
    submitForm() {
      this.dialogVisible = false
    }
    /* 详情弹层 end*/
  }
}
</script>
